<template>
  <div class="listviewtop" v-if="playlist.id">
    <img :src="playlist.coverImgUrl" class="bg" />
    <div class="listviewtopNav">
      <van-nav-bar title="歌单详情" left-text="返回" left-arrow @click-left="tohome"></van-nav-bar>
      <div @click="$router.push('/searchview')">
        <svg class="icon sousuo" aria-hidden="true">
          <use xlink:href="#icon-sousuo1" />
        </svg>
      </div>

      <div class="content">
        <div class="left">
          <div class="count">
            <svg class="icon sousuo" aria-hidden="true">
              <use xlink:href="#icon-bofan" />
            </svg>
            <span
              v-text="playlist.playCount >= 10000 ? parseInt(playlist.playCount / 10000) + '万' : playlist.playCount"
            ></span>
          </div>
          <img :src="playlist.coverImgUrl" alt />
        </div>
        <div class="rigth">
          <div class="testlist" v-text="playlist.name"></div>
          <div class="testlist">
            <img :src="playlist.creator.avatarUrl" />
            <div class="text" v-text="playlist.creator.nickname"></div>
          </div>
          <div class="testlist">
            <div class="text" v-text="playlist.description"></div>
            <!-- <svg class="icon sousuo" aria-hidden="true" @click="$router.push('/searchview')">
              <use xlink:href="#icon-sousuo1" />
            </svg>-->
          </div>
        </div>
      </div>

      <div class="iconList">
        <div class="iconbox">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-liaotian" />
          </svg>
          <span v-text="playlist.commentCount"></span>
        </div>
        <div class="iconbox">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-fenxiang" />
          </svg>
          <span v-text="playlist.shareCount"></span>
        </div>
        <div class="iconbox">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xiazai" />
          </svg>
          <span>下载</span>
        </div>
        <div class="iconbox">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-duoxuanxuanzhong" />
          </svg>
          <span>更多</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import {playListDetail} from '../../js/axios'
export default {
  props: {
    playlist: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
    }
  },
  created () {

    // console.log(this.$route.query)
    // this.getplayListDetail(this.$route.query)
  },
  watch: {

  },
  methods: {

    tohome () {
      this.$router.go(-1)
    }
  }
}
</script>
<style>
.listviewtop .van-nav-bar__title {
  color: #fff;
  font-weight: 700;
}
.listviewtop .van-nav-bar .van-icon,
.van-nav-bar__text {
  color: #fff;
}

.listviewtop .van-nav-bar {
  background: none !important;
}
</style>
<style lang="less" scoped>
.listviewtop {
  height: 30%;
  .bg {
    width: 100%;
    height: auto;
    filter: blur(40px);
  }
  .listviewtopNav {
    position: fixed;
    top: 0;
    left: 0.1rem;
    width: 100%;
    background: none;
  }
  .content {
    display: flex;
    margin-top: 0.1rem;
    .left {
      flex: 1;
      img {
        width: 3rem;
        height: auto;
        border-radius: 0.1rem;
      }
      .count {
        position: absolute;
        left: 1.5rem;
        color: #fff;
        .icon {
          width: 0.3rem;
          height: 0.3rem;
          top: 0.07rem;
          left: -0.37rem;
        }
      }
    }
    .rigth {
      flex: 2;
      .testlist {
        margin: 0.2rem;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
      }
      .testlist:nth-child(1) {
        color: #fff;
        font-weight: 900;
      }
      .testlist:nth-child(2) {
        display: flex;
        color: #ccc;
        img {
          width: auto;
          height: 0.8rem;
          border-radius: 100%;
        }
        .text {
          display: inline;
          height: 0.8rem;
          line-height: 0.8rem;
          margin: 0 0.2rem;
        }
      }
      .testlist:nth-child(3) {
        display: flex;
        color: #ccc;
        .text {
          display: inline;
          margin: 0 0.2rem;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          word-break: break-all;
        }
      }
    }
  }
  .iconList {
    display: flex;
    justify-content: space-between;
    margin-right: 0.2rem;
    .iconbox {
      // height: 2rem;
      // background-color: red;
      color: #fff;
      margin-top: 0.2rem;
      flex: 1;
      .icon {
        width: 0.5rem;
        height: 0.5rem;
        display: inherit;
        margin: 0 auto;
      }
      span {
        display: inherit;
        text-align: center;
        margin: 0.1rem 0;
      }
    }
  }
}
.listviewtop .sousuo {
  position: absolute;
  top: 0.3rem;
  right: 1rem;
  z-index: 9;
  width: 0.5rem;
  height: 0.5rem;
}
</style>